<template>
	<!-- 报销管理 -->
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="add"
					v-auth-button="['add/reimburseManagement']"
				></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input
						v-model="searchValue.search"
						placeholder="报销名称"
						clearable
					></el-input>
					<el-select
						v-model="searchValue.paymentStatus"
						placeholder="请选择付款状态"
						style="width: 100%"
						clearable
					>
						<el-option label="未付款" :value="0" />
						<el-option label="已付款" :value="1" />
					</el-select>
					<el-select
						v-model="searchValue.status"
						placeholder="请选择审核状态"
						style="width: 100%"
						clearable
					>
						<el-option label="待审核" :value="0" />
						<el-option label="已通过" :value="1" />
						<el-option label="未通过" :value="2" />
						<el-option label="审核中" :value="3" />
					</el-select>
					<el-date-picker
						v-model="searchValue.startTime"
						type="date"
						placeholder="选择开始日期"
						value-format="YYYY-MM-DD"
						style="width: 100%"
					>
					</el-date-picker>
					<el-date-picker
						v-model="searchValue.endTime"
						type="date"
						placeholder="选择结束日期"
						value-format="YYYY-MM-DD"
						style="width: 100%"
					>
					</el-date-picker>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="upsearch"
					></el-button>
				</div>
			</div>
		</el-header>
		<div class="count" v-auths="['financeCount']">
			<p>
				报销总额：{{
					countMoney.totalReimburseMoney == null
						? 0
						: countMoney.totalReimburseMoney
				}}元
			</p>
			<p>
				报销年总额：{{
					countMoney.yearReimburseMoney == null
						? 0
						: countMoney.yearReimburseMoney
				}}元
			</p>
			<p>
				报销月总额：{{
					countMoney.monthReimburseMoney == null
						? 0
						: countMoney.monthReimburseMoney
				}}元
			</p>
		</div>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				row-key="id"
				stripe
				@row-dblclick="handleRowDblclick"
				:showSummary="true"
				:summary-method="getSummaries"
			>
				<el-table-column
					label="ID"
					prop="id"
					width="50"
				></el-table-column>
				<el-table-column
					label="报销事项"
					prop="reimbursementName"
					min-width="200"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					label="报销人"
					prop="applicantName"
					width="100"
				></el-table-column>
				<el-table-column
					label="报销时间"
					prop="reimbursementTime"
					width="100"
				></el-table-column>
				<el-table-column
					label="报销金额"
					prop="reimburseMoney"
					width="150"
				>
					<template #default="scope">
						<p>{{ scope.row.reimburseMoney }}元</p>
					</template>
				</el-table-column>
				<el-table-column
					label="类型"
					prop="expensesName"
					width="100"
				></el-table-column>
				<el-table-column
					label="经办人"
					prop="operatorName"
					width="150"
				></el-table-column>
				<el-table-column
					label="备注"
					prop="remark"
					min-width="200"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					label="付款状态"
					prop="paymentStatus"
					width="200"
				>
					<template #default="scope">
						<p
							v-if="scope.row.paymentStatus == 1"
							style="color: #67c23a"
						>
							已付款
						</p>
						<p
							v-if="scope.row.paymentStatus == 0"
							style="color: #f56c6c"
						>
							未付款
						</p>
					</template>
				</el-table-column>
				<el-table-column
					label="审核状态"
					prop="status"
					width="100"
					fixed="right"
				>
					<template #default="scope">
						<!-- 0未审核 1审核通过 2审核拒绝 3审核中  -->
						<p v-if="scope.row.status == 0">待审核</p>
						<p v-if="scope.row.status == 1" style="color: #67c23a">
							通过
						</p>
						<p v-if="scope.row.status == 2" style="color: #f56c6c">
							未通过
						</p>
						<p v-if="scope.row.status == 3" style="color: #ff9b31">
							审核中
						</p>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="250"
				>
					<template #default="scope">
						<el-button-group>
							<el-button
								text
								type="primary"
								size="small"
								@click="table_confirm(scope.row, scope.$index)"
								v-if="
									scope.row.status == 1 &&
									scope.row.paymentStatus == 0 &&
									userInfo.userId == scope.row.operatorId
								"
								v-auth-button="['confirm/reimburseManagement']"
								>确认付款</el-button
							>
							<el-button
								text
								type="primary"
								size="small"
								@click="table_show(scope.row, scope.$index)"
								v-auth-button="['show/reimburseManagement']"
								>查看</el-button
							>
							<el-button
								text
								type="primary"
								size="small"
								@click="table_edit(scope.row, scope.$index)"
								v-auth-button="['edit/reimburseManagement']"
								v-if="scope.row.status == 0"
								>编辑</el-button
							>
							<el-popconfirm
								title="确定作废吗？"
								@confirm="table_del(scope.row, scope.$index)"
								v-if="scope.row.status != 0"
							>
								<template #reference>
									<el-button
										text
										type="primary"
										size="small"
										v-auth-button="[
											'scrap/reimburseManagement',
										]"
										>作废</el-button
									>
								</template>
							</el-popconfirm>
							<el-popconfirm
								title="确定删除吗？"
								@confirm="table_del(scope.row, scope.$index)"
								v-if="scope.row.status == 0"
							>
								<template #reference>
									<el-button
										text
										type="primary"
										size="small"
										v-auth-button="[
											'delete/reimburseManagement',
										]"
										>删除</el-button
									>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<confirm-dialog
		v-if="dialog.confirm"
		ref="confirmDialog"
		@success="handleSaveSuccess"
		@closed="dialog.confirm = false"
	></confirm-dialog>
</template>

<script>
import confirmDialog from "./components/confirm";
export default {
	name: "reimbursManagement",
	components: {
		confirmDialog,
	},
	data() {
		return {
			dialog: {
				confirm: false,
			},
			apiObj: this.$API.finance.getReimbursementList,
			searchValue: {
				search: null,
				status: "",
				paymentStatus: null,
				startTime: "",
				endTime: "",
			},
			columnsFilters: ["reimburseMoney"],
			countMoney: [],
			userInfo: {},
		};
	},
	mounted() {
		//this.getCustomerList()
		this.userInfo = this.$TOOL.data.get("USER_INFO");
		this.getCountMoney();
	},
	methods: {
		//列表统计
		async getCountMoney() {
			var res = await this.$API.finance.getReimbursementCountMoney.get();
			if (res.data != null) {
				this.countMoney = res.data;
			}
		},
		//添加
		add() {
			// this.dialog.save = true
			// this.$nextTick(() => {
			//   this.$refs.saveDialog.open()
			// })
			this.$router.push({
				path: "/finance/reimburseManagement/reimburseAdd",
				query: {
					mode: "add",
				},
			});
		},
		//合计行统计
		getSummaries(param) {
			console.log(param);
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 1) {
					sums[index] = "页合计";
					return;
				}
				if (this.columnsFilters.includes(column.property)) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = sums[index].toFixed(2);
						sums[index] += " 元";
					} else {
						sums[index] = "";
					}
				}
			});
			return sums;
		},
		//编辑
		table_edit(row) {
			this.$router.push({
				path: "/finance/reimburseManagement/reimburseAdd",
				query: {
					mode: "edit",
					id: row.id,
				},
			});
		},
		// 确认付款
		table_confirm(row) {
			this.dialog.confirm = true;
			this.$nextTick(() => {
				this.$refs.confirmDialog.open(row);
			});
		},
		//查看
		table_show(row) {
			this.$router.push({
				path: "/finance/reimburseManagement/reimburseDetail",
				query: {
					id: row.id,
				},
			});
		},
		//删除
		async table_del(row) {
			let data = {
				id: row.id,
				projectId: row.projectId,
			};
			var res = await this.$API.finance.deleteReimbursement.post(data);
			if (res.code == 200) {
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			}
		},

		//搜索
		upsearch() {
			this.$refs.table.upData(this.searchValue);
		},

		//本地更新数据
		handleSaveSuccess() {
			this.$refs.table.refresh();
		},
		// 双击表格
		handleRowDblclick(row) {
			this.table_show(row);
		},
	},
};
</script>

<style lang="scss" scoped>
.count {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 50px;
	padding-left: 12px;
	font-size: 14px;
	color: #555;
	font-weight: 600;
	p {
		margin-right: 20px;
	}
}
</style>
